<template>
    <div class="container">
      <div class="title">氧气传感器</div>
      <div class="content-container">
        <div class="tip-container">
          <div class="tip-circle" style="background-color: #56FFF6"></div>
          <div class="tip-text">第一区数据</div>
        </div>
        <div class="chart" ref="chart1"></div>
        <div class="tip-container">
          <div class="tip-circle" style="background-color: #FFED9F"></div>
          <div class="tip-text">第二区数据</div>
        </div>
        <div class="chart" ref="chart2"></div>
        <div class="tip-container">
          <div class="tip-circle" style="background-color: #99ABFF"></div>
          <div class="tip-text">第三区数据</div>
        </div>
        <div class="chart" ref="chart3"></div>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery'
  import _ from 'lodash'
  import * as Constant from './common/Constant';

  import echarts from 'echarts';
  import highcharts from 'highcharts'

  import chartConfig from './chartConfig/Oxygen';

    export default {
        name: 'Oxygen',
        data() {
            return {
              chartData1:{},
              chart1:null,
              chartData2:{},
              chart2:null,
              chartData3:{},
              chart3:null,
            }
        },
        computed: {},
        methods: {
          updateChart(){
            let me = this;
            if(!this.chart1){
              this.chart1 = highcharts.chart(this.$refs.chart1, this.chartData1)
            }else {
              this.chart1.series[0].setData(this.chartData1.series[0].data)
            }
            if(!this.chart2){
              this.chart2 = highcharts.chart(this.$refs.chart2, this.chartData2)
            }else {
              this.chart2.series[0].setData(this.chartData2.series[0].data)
            }
            if(!this.chart3){
              this.chart3 = highcharts.chart(this.$refs.chart3, this.chartData3)
            }else {
              this.chart3.series[0].setData(this.chartData3.series[0].data)
            }
            setTimeout(me.getData, Constant.INTERVAL*1000);
          },
          getData(){
            let me = this;
            let configData = {
              name: '',
              legend: [],
              time: [],
              data: [],
              colors : [],
            };
            if(Constant.LOCAL){

              // chart1
              configData.name=''; // '1区氧气传感器'
              configData.legend= ['第一区数据'];
              configData.time = [1,2,3,4,5,6,7,8]
              configData.data = [
                configData.time.map(()=>{
                  return _.random(100);
                })
              ]
              configData.colors = ['#56FFF6'];
              me.chartData1 = chartConfig.getConfigHcharts(configData.name, configData.legend, configData.time, configData.data, configData.colors)

              // chart2
              configData.legend= ['第二区数据'];
              configData.colors = ['#FFED9F'];
              me.chartData2 = chartConfig.getConfigHcharts(configData.name, configData.legend, configData.time, configData.data, configData.colors)

              // chart3
              configData.legend= ['第三区数据'];
              configData.colors = ['#99ABFF'];
              me.chartData3 = chartConfig.getConfigHcharts(configData.name, configData.legend, configData.time, configData.data, configData.colors)

              //me.chartData1 = chartConfig.getConfig(configData.name, configData.legend, configData.time, configData.data, configData.colors)
              me.updateChart();
            }else{

            }
          },
        },
        mounted() {
          let me = this;
          this.getData();
        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>
  .title
    margin-bottom: 6px;
  .content-container
    display: flex;
    flex-direction: column;
    .tip-container
      display: flex;
      flex-direction: row;
      justify-content flex-end
      align-items center
      margin-top: 15px;
      margin-bottom 6px;
      .tip-circle
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right 3px;
      .tip-text
        opacity: 0.8;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0.1px;
  .chart
    flex: 1;
    width: 100%;
</style>
